<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <h1>学生名: {{ studentName }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现,子给父的信息传递 -->
    <School :getSchoolName="getSchoolName"/>

    <!-- 通过父组件给子组件绑定自定义事件实现,子给父的信息传递  (第一种写法，使用v-on或@)-->
    <!-- <Student v-on:myEvent="getStudentName" @demo="m1"/>  -->


     <!-- 通过父组件给子组件绑定自定义事件实现,子给父的信息传递  (第二种写法，使用ref)-->

    <Student ref="student" @click.native="show"/>

  </div>
</template>



<script>
// 1.一种组件间通信的方式，适用于:子组件 ===>父组件
// 2.使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)。
// 3.绑定自定义事件:
//   1.第一种方式，在父组件中:<Demo @myEvent="test"/> 或<Demo v-on:myEvent="test"/>
//   2.第二种方式，在父组件中:
//   <Demo ref="demo"/>
//   。.....
//   mounted(){
//   this.$refs.xxx.$on('myEvent',this.test)
//   3.若想让自定义事件只能触发一次，可以使用once 修饰符，或 $once 方法
// 4.触发自定义事件: this.$emit('myEvent',数据)
// 5.解绑自定义事件this.$off('myEvent')
// 6.组件上也可以绑定原生DOM事件，需要使用 native 修饰符
// 7.注意:通过 this.refs.xxx$on(myEvent',回调) 绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!

// scoped样式
// 作用:让样式在局部生效，防止冲突。
// 写法: <style scoped>
    // 引入组件
    import Student from './components/Student'

    import School from './components/School'


    export default {
        name: 'App',
        components:{
          Student,School
        },data() {
          return {
            msg:"你好啊！！",
            studentName:""
          }
        },
        methods:{
          getSchoolName(SchoolName){
            console.log("获取到学校名:",SchoolName)
          },
          getStudentName(studentName){
            console.log("获取到学生名:",studentName)
            this.studentName=studentName
          },
          m1(){
            console.log("demo事件被触发了")
          },
          show(){
            alert(123)
          }
        },
        mounted(){
          // setTimeout(() => {
          // }, 3000);
          this.$refs.student.$on("myEvent",(studentName)=>{
            console.log("获取到学生名:",studentName)  
            this.studentName=studentName  //注意: 这里的this 如果不写=> 是触发$emit的student组件实例
          }); //绑定自定义事件

          // this.$refs.student.$once("myEvent",this.getStudentName); //绑定自定义事件(一次性)

          // setTimeout(() => {
          //   this.$destroy()
          // }, 3000);
        }
    }
</script>
<style  lang="less">
.app{
  background-color: yellow;
  padding: 5px;
}
</style>